<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right" style="height: 30px;">
                <el-breadcrumb-item>HR系统</el-breadcrumb-item>
                <el-breadcrumb-item>信息管理</el-breadcrumb-item>
                <el-breadcrumb-item>班别管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 班别搜索模块 -->
        <div>
            <el-form label-width="100px" style="flex: 1;">
                <div style="display: flex;">
                    <el-row>
                        <el-col style="width: 100px;">
                            <el-form-item label="班别代码:"></el-form-item>
                        </el-col>
                        <el-col style="width: 200px;">
                            <el-input placeholder="请输入班别代码：" v-model="banBieInfo.banBieCode"></el-input>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-form-item label="班别名称："></el-form-item>
                        </el-col>
                        <el-col style="width: 200px;">
                            <el-input placeholder="请输入班别名称：" v-model="banBieInfo.banBieName"></el-input>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-form>
                                <el-form-item>
                                    <el-button type="primary" @click="getBanBieData()" size="mini"
                                        style="height: 40px;"><i class="el-icon-search" />搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-button type="danger" @click="reset()" size="mini" style="height: 40px;">重置 <i
                                    class="el-icon-refresh-left" /></el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>


</template>

<script>
export default {
    created() {
        this.getBanBieData();
    },
    data() {
        return {
            // 班别查询的参数信息
            banBieInfo: {
                banBieCode: "",//班别代码
                banBieName: "",//班别名称
                pageNumber: 1,//默认显示的页数
                pageSize: 5,//每页默认显示的数据
            }
        }
    },
    methods: {
        async getBanBieData() {
            const { data: res } = await this.$http.get("banbie", { params: this.banBieInfo });
            this.banbieList = res.data.data;
            this.total = res.data.banbieCounts;
            if (res.code == 106) {
                return this.$message.error(res.message);
            }
        },
    }
}
</script>

<style>
.content-search {
    background: #ffffff;
    height: 10px;
}

.el-table__body-wrapper {
    overflow-y: auto;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.row-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}
</style>